
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>

      $(function () {
            $.ajax({
                url:"user/users",
                data:"pn=1",
                type:"get",
                success:function (result) {
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    buildUsersTab(result);
                    buildNavTab(result);
                }
            });
      })



      function toPage(pn) {
          console.log("获取第" + pn  + "页数据");
          $.ajax({
              url: "user/users",
              data: "pn="+pn,
              type:"GET",
              success:function (result) {
                  buildUsersTab(result);
                  buildNavTab(result);
                  updateCurrentPage(result.pageNum);
              }
          });
      }

    function updateCurrentPage(pageNum) {
        $("#currentPage").text(pageNum);
    }

      function buildNavTab(result) {
          $("#pnav").empty();
          console.log(result.hasPreviousPage+ "---",result);
          var ul = $("<ul></ul>").addClass("pagination")
          var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href","#"));
          var prePageLi;
          var nexPageLi;
          if (!result.hasPreviousPage) {
              prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
          } else {
              prePageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
          }
          if (!result.hasNextPage) {
              nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
          } else {
              nexPageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
          }
          var lastPageLi = $("<li></li>").append($("<a onclick='toPage("+result.pages+")'></a>").append("尾页").attr("href","#"));
          ul.append(firstPageLi).append(prePageLi);
          $.each(result.navigatepageNums,function (index,item){
              var numli;
              if (result.pageNum == item) {
                  numli = $("<li></li>").addClass("active").append($("<a onclick='toPage("+item+")'></a>").append(item));
              } else {
                  numli = $("<li></li>").append($("<a onclick='toPage("+item+")'></a>").append(item));
              }
              ul.append(numli);
          });
          ul.append(nexPageLi).append(lastPageLi);
        var nav = $("<nav></nav>").append(ul);
        nav.appendTo("#pnav");
      }

      function buildUsersTab(obj) {
          $("#userstab tbody").empty();
        var users = obj.list;
        console.log(users)
        $.each(users, function (index, item) {
            var checkbox = $("<td></td>").append("<input type='checkbox' name='checkbox' value='" + item.id +"'/>");
          var id = $("<td></td>").append(item.id);
          var d_name = $("<td></td>").append(item.dname);
          var d_type = $("<td></td>").append(item.dtype);
          var d_state = $("<td></td>").append(item.dstate);
          var d_note = $("<td></td>").append(item.dnote);
          var create_time = $("<td></td>").append(item.createTime);
          var editBtn = $("<button data-toggle='modal' data-target= '#myModal_update' onclick='update( "  + item.id + " )'>编辑</button>").addClass("btn btn-success");
          var deleteBtn = $("<button onclick='deleteById("+ item.id +")'>删除</button>").addClass("btn btn-danger");
          var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);
          $("<tr></tr>")
                  .append(checkbox)
                  .append(id)
                  .append(d_name)
                  .append(d_type)
                  .append(d_state)
                  .append(d_note)
                  .append(create_time)
                  .append(btnTd)
                  .appendTo("#userstab tbody");
        });
      }
      function aa(id){
          console.log("=====>");
          return false;
      }
      function saveData(){
      var dState = document.getElementById('inputDState').value;
      if (dState=="正常") {
          console.log('正确，可以继续保存数据');
              let user = {
                  "dname": document.getElementById("inputDName").value,
                  "dtype": document.getElementById("inputDType").value,
                  "dstate": document.getElementById("inputDState").value,
                  "dnote": document.getElementById("inputDNote").value,
                  "createTime": document.getElementById("inputCreateTime").value,
              };
              $.ajax({
                  url:"user/save",
                  type:"post",
                  cache:false,
                  data: JSON.stringify(user),
                  dataType:"json",
                  contentType:"application/json;charset=utf-8",
                  success:function (result) {
                      console.log(result);
                      if (200 == result.code){
                          alert("添加成功");
                          $('#myModal_insert').modal('hide');
                          loadPage();
                      }else {
                          alert("添加失败");
                      }

                  },
                  complete:function (err) {
                      console.log("err",err);
                  }
              });
              return false;
          }
      else {
          alert('状态输入不正确，请重新输入（正常）');
          document.getElementById('inputDState').focus();

      }}

      function loadPage(){
          $.ajax({
              url:"user/users",
              data:"pn=1",
              type:"get",
              success:function (result) {
                  $("#currentPage").text(result.pageNum);
                  $("#pages").text(result.pages);
                  $("#total").text(result.total);
                  buildUsersTab(result);
                  buildNavTab(result);
              }
          });
          return false;
      }

      function selectByInput1(){
          let dName=document.getElementById("dName").value;
          let dType=document.getElementById("dType").value;
          let dState=document.getElementById("dState").value;
          console.log(dName);

          $.ajax({
              url:"user/selectByDName",
              type:"get",
              data:{
                  pn:1,
                  dName:dName,
                  dType:dType,
                  dState:dState
              },
              dataType:"json",
              contentType:'applocation/json;charset=utf-8',
              success:function (result) {
                  console.log(result);
                  console.log(result.dName);
                  $("#currentPage").text(result.pageNum);
                  $("#pages").text(result.pages);
                  $("#total").text(result.total);

                  buildUsersTab(result);
                  buildNavTab(result);
              },

              complete:function (err) {
                  console.log("err",err);
              }
          });
          return false;
      }
      function reset(){
          $("dName").val().empty();
          $("dType").val().empty();
          $("dState").val().empty();
          loadPage();
      }
      function excel(){
          $.ajax({
              url : 'user/excel',
              type : 'get',
              success : function (res){
                  console.log("res:",res)
              },
              dataType : 'json'
          });
      }

      function update(id){
          $("#Id").val(id);
      }

      function updateData(){
          let id = $("#Id").val();
          var dname= document.getElementById("inputDNameXiu").value;
          var dtype= document.getElementById("inputDTypeXiu").value;
          var dnote= document.getElementById("inputDNoteXiu").value;
          var updateTime= document.getElementById("inputUpdateTimeXiu").value;

          console.log(id)
          var user = {
              id : id,
              dname : dname,
              dtype : dtype,
              dnote:dnote,
              updateTime :updateTime
          }
          $.ajax({
              url:'user/updateData',
              data:JSON.stringify(user),
              type:'put',
              dataType:'json',
              contentType:'application/json;charset=utf-8',
              success:function (res){
                  console.log(res);
                  console.log(res.code);
                  if (res.code == 200){
                      alert("修改成功");
                      $('#myModal_update').modal('hide');
                      loadPage();
                  }else {
                      alert("修改失败");
                  }

              },
              complete:function (err) {
                  console.log("err",err);
              }
          });
          return false;
      }
      function checkAll(){
          let cheks = document.getElementsByName("checkbox");
          for (let i = 0; i<cheks.length ; i++){
              cheks[i].checked = !cheks[i].checked;
          }
      }
      function deleteall(){
          var checkedNum=$("input[name='checkbox']:checked").length;
          alert(checkedNum);
          if(checkedNum==0){
              alert("请至少选择一个进行删除！！！");
              return;
          }
          if(confirm("确认要删除这些用户吗？")){
              var userlist=new Array();
              $("input[name='checkbox']:checked").each(
                  function () {
                      userlist.push($(this).val())
                  }
              );
              alert(userlist);
              $.ajax({
                  type:"post",
                  url: "user/deleteall",
                  data:{
                      userlist:userlist.toString()
                  },
                  success:function () {
                      alert("删除成功");
                      location.reload();

                  },
                  error:function () {
                      alert("删除失败");
                  }
              });
          }
      }


      function deleteById(id){

          $.ajax({
              url:"user/deleteRight",
              type:"post",
              data:{
                  id:id
              },
              dataType:"json",
              success:function (result) {
                  console.log(result);
                  if (result.code == 200) {
                      alert("删除成功");
                      loadPage();
                  } else {
                      alert("删除失败");
                  }
              }
          })
      }
      function updateAll(){
          var checkedNum=$("input[name='checkbox']:checked").length;
          if (checkedNum == 0){
              alert("请选择一个编号");
              return;
          }
          if (checkedNum >1){
              alert("只能选择一个修改！");
              return;
          }

          let id =0;
          $("input[name='checkbox']:checked").each(
              function () {
                  id = $(this).val();
              }
          );
          console.log(id)

          var dname = document.getElementById("inputDNameXiu1").value;
          var dtype = document.getElementById("inputDTypeXiu1").value;
          var dnote = document.getElementById("inputDNoteXiu1").value;
          var updateTime = document.getElementById("inputUpdateTimeXiu1").value;
          var user = {
              id : id,
              dname : dname,
              dtype : dtype,
              dnote:dnote,
              updateTime :updateTime
          }

          $.ajax({
              url:"user/updateall",
              type:"post",
              data: JSON.stringify(user),
              dataType:"json",
              contentType:"application/json;charset=utf-8",
              success:function (result) {
                  console.log(result);
                  console.log(result.code);
                  if (result.code == 200){
                      alert("修改成功");
                      $('#myModal_update1').modal('hide');
                      loadPage();
                  }else {
                      alert("修改失败");
                  }

              },
              complete:function (err) {
                  console.log("err",err);
              }
          });
          return false;

      }
    </script>
</head>
<body>

<form class="form-inline">
    <div class="form-group">
        <label for="dName">字典名称</label>
        <input type="text" class="form-control" id="dName" placeholder="字典名称" oninput="selectByInput1(this.value)">
    </div>

    <div class="form-group">
        <label for="dType">字典类型</label>
        <input type="text" class="form-control" id="dType" placeholder="字典类型">
    </div>

    <div class="form-group">
        <label for="dState">字典状态</label>
        <select class="form-control" id="dState" name="dState" required style="width: 150px">
            <option value="">所有</option>
            <option value="正常">正常</option>
            <option value="禁用">禁用</option>
        </select>
    </div>

    <div class="form-group">
        <label for="dTime">创建时间</label>
        <input type="text" class="form-control" id="dTime" placeholder="开始时间" size="8px">
        -
        <input type="text" class="form-control" id="dTimed" placeholder="结束时间" size="8px">
    </div>


    <button type="button" class="btn btn-success btn-sm" onclick="selectByInput1()">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
    </button>

    <button type="button" class="btn btn-warning btn-sm" onclick="reset()">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>重置
    </button>
</form>



  <div class="form-group">
      <button class="btn btn-success" data-toggle="modal" data-target= "#myModal_insert">新增</button>
    <button class="btn btn-info" data-toggle="modal" data-target= "#myModal_update1">更新</button>
      <button class="btn btn-success" onclick="excel()">导出</button>
    <button class="btn btn-danger" onclick="deleteall()">删除</button>

  </div>





<table class="table table-striped" id="userstab">
  <thead>
  <th><input type="checkbox" id="checkAll" onclick="checkAll()"/></th>
  <th>字典主键</th>
  <th>字典名称</th>
  <th>字典类型</th>
  <th>状态</th>
  <th>备注</th>
  <th>创建时间</th>
  <th>操作</th>
  </thead>
  <tbody>

  </tbody>
  <tfoot>
  <tr>
    <td colspan="3">
      当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据

    </td>
    <td colspan="5" align="center">

      <nav aria-label="Page navigation" id="pnav">
      </nav>
    </td>
  </tr>
  </tfoot>
</table>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal_insert">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">填写数据</h4>
            </div>
            <div class="modal-body">



                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputDName" class="col-sm-2 control-label">字典名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDName" placeholder="字典名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputDType" class="col-sm-2 control-label">字典类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDType" placeholder="字典类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputDState" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDState" placeholder="状态">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputDNote" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDNote" placeholder="备注">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCreateTime" class="col-sm-2 control-label">添加时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputCreateTime" placeholder="添加时间">
                        </div>
                    </div>


                </form>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveData()">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal_update">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">填写数据</h4>
            </div>
            <div class="modal-body">



                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="hidden" id="Id" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputDNameXiu" class="col-sm-2 control-label">字典名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDNameXiu" placeholder="字典名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputDTypeXiu" class="col-sm-2 control-label">字典类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDTypeXiu" placeholder="字典类型">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputDNoteXiu" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDNoteXiu" placeholder="备注">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUpdateTimeXiu" class="col-sm-2 control-label">修改时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputUpdateTimeXiu" placeholder="修改时间">
                        </div>
                    </div>


                </form>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateData()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal_update1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">填写数据</h4>
            </div>
            <div class="modal-body">



                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="hidden" id="Id1" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputDNameXiu1" class="col-sm-2 control-label">字典名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDNameXiu1" placeholder="字典名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputDTypeXiu1" class="col-sm-2 control-label">字典类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDTypeXiu1" placeholder="字典类型">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputDNoteXiu1" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputDNoteXiu1" placeholder="备注">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUpdateTimeXiu1" class="col-sm-2 control-label">修改时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputUpdateTimeXiu1" placeholder="修改时间">
                        </div>
                    </div>


                </form>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateAll()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>
